<template>
	<div class="login-register">
		<div>
			<div class="title">melody</div>
			<div class="log-reg-input">
				<div class="tabs"><span :class="['log-btn',{'line-show':isShowLog}]" @click="LoginTabs">登录</span><span :class="['reg-btn',{'line-show':isShowReg}]" @click="RegisterTabs">注册</span></div>
				<div v-if="changeShow==true">
					<div class="input-box">
						<p class="user"><img src="../assets/user-logo.png"><input type="" name="" placeholder="请输入手机号" v-model="phoneNumber" @blur="PhoneNumberPD"></p>
						<p class="passwd"><img src="../assets/lock.png"><input type="" name=""placeholder="请输入密码" v-model="password" @blur="PasswordPD"></p>
					</div>
					<span class="loginto-btn" @click="UserLogin"><img src="../assets/denglu.png"></span>
				</div>
				<div v-else>
					<div class="input-box">
						<p class="user"><img src="../assets/user-logo.png"><input type="" name="" placeholder="请输入手机号" v-model="regPhoneNumber" @blur="RegPhoneNumberPD"></p>
						<p class="passwd"><img src="../assets/lock.png"><input type="" name=""placeholder="请输入密码" v-model="regPassword" @blur="RegPasswordPD"></p>
					</div>
					<span class="register-btn" @click="UserRegister"><img src="../assets/zhuce.png"></span>
				</div>
				<div class="feng-line">
					<span><img src="../assets/line.png"></span>
					<span class="word">其他登录方式</span>
					<span><img src="../assets/line.png"></span>
				</div>
			</div>
			<div class="other-login">
				<span class="qq"><img src="../assets/qq.png"></span>
				<span class="weixin"><img src="../assets/weixin.png"></span>
				<span class="weibo"><img src="../assets/weibo.png"></span>
			</div>
			<transition name="fade">
				<div class="msg-tips" v-if="showRegMsg">{{registerMsg}}</div>
			</transition>
		</div>
	</div>
</template>
<script>
	export default {
		name:'loginRegister',
		data(){
			return{
				changeShow:true,
				isShowLog:true,
				isShowReg:false,
				phoneNumber:'',
				password:'',
				regPhoneNumber:'',
				regPassword:'',
				registerMsg:'',
				showRegMsg:false,
				timer:'',
				regPhoneNumberReady:false,
				regPasswordReady:false,
				phoneNumberReady:false,
				passwordReady:false
			}
		},
		methods:{
			LoginTabs(){
				this.changeShow=true;
				this.isShowLog=true;
				this.isShowReg=false
			},
			RegisterTabs(){
				this.changeShow=false;
				this.isShowLog=false;
				this.isShowReg=true

			},
			UserLogin(){
				if(this.phoneNumberReady==true&&this.passwordReady==true){
					this.$axios.post("http://localhost:3000/login",{
						phone:this.phoneNumber,
						password:this.password
					})
					.then(res =>{
						var data = res.data;
						if(data){
							if(data.msg){
								this.showRegMsg= true;
						        this.registerMsg=data.msg;
						        var that = this;
						        this.timer=setTimeout(function(){
						        	that.showRegMsg = false;
						        },3000);
						        return false; 
							}
							else{
								this.$router.push('/layout');
							}
						}
					})
					.catch(error =>{
						console.log(error)
					})
				}
			},
			UserRegister(){
				if(this.regPhoneNumberReady==true&&this.regPasswordReady==true){
					this.$axios.post("http://localhost:3000/register",{
						phone:this.regPhoneNumber,
						password:this.regPassword
					})
					.then(res => {
						var data = res.data;
						if(data.msg == "已经注册"){
							this.showRegMsg= true;
					        this.registerMsg="手机号已注册！"; 
					        this.regPhoneNumber='';
					        this.regPassword='';
					        var that = this;
					        this.timer=setTimeout(function(){
					        	that.showRegMsg = false;
					        },3000);
					        return false; 
						}
						else if(data.msg == "注册成功"){
							this.showRegMsg= true;
					        this.registerMsg=data.msg; 
					        this.regPhoneNumber='';
					        this.regPassword = '';
					        this.changeShow=true;
							this.isShowLog=true;
							this.isShowReg=false;
					        var that = this;
					        this.timer=setTimeout(function(){
					        	that.showRegMsg = false;
					        },3000);
					        return false;
						}
						else{
							this.showRegMsg= true;
					        this.registerMsg=data.msg; 
					        this.regPhoneNumber='';
					        this.regPassword = '';
					        var that = this;
					        this.timer=setTimeout(function(){
					        	that.showRegMsg = false;
					        },3000);
					        return false;
						}
					})
					.catch(error => {
						console.log(error)
					})
				}
			},
			RegPhoneNumberPD(){
				if(this.regPhoneNumber.length==0){ 
					this.showRegMsg= true;
			        this.registerMsg='请输入手机号码！';
			        var that = this;
			        this.timer=setTimeout(function(){
			        	that.showRegMsg = false;
			        },3000);
			        return false; 
			    }     
			    if(this.regPhoneNumber.length!=11){ 
			    	this.showRegMsg= true;
			        this.registerMsg='请输入有效的手机号码！'; 
			        var that = this;
			        this.timer=setTimeout(function(){
			        	that.showRegMsg = false;
			        },3000);
			        return false; 
			    } 
			    var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
			    if(!myreg.test(this.regPhoneNumber)){ 
			       	this.showRegMsg= true;
			        this.registerMsg='请输入有效的手机号码！'; 
			        var that = this;
			        this.timer=setTimeout(function(){
			        	that.showRegMsg = false;
			        },3000);
			        return false; 
			     } 
			     this.regPhoneNumberReady = true;
			     clearTimeout(this.timer);
			},
			RegPasswordPD(){
				if(this.regPassword.length<6||this.regPassword.length>12){
					this.showRegMsg = true;
					this.registerMsg='密码为6~12位'; 
			        var that = this;
			        this.timer=setTimeout(function(){
			        	that.showRegMsg = false;
			        },3000);
			        return false; 
				}
				else{
					this.regPasswordReady = true;
				}
			},
			PhoneNumberPD(){
				if(this.phoneNumber.length==0){
					this.showRegMsg= true;
			        this.registerMsg='手机号不能为空！';
			        var that = this;
			        this.timer=setTimeout(function(){
			        	that.showRegMsg = false;
			        },3000);
			        return false; 
				}
				this.phoneNumberReady = true;
			},
			PasswordPD(){
				if(this.password.length==0){
					this.showRegMsg= true;
			        this.registerMsg='密码不能为空！';
			        var that = this;
			        this.timer=setTimeout(function(){
			        	that.showRegMsg = false;
			        },3000);
			        return false; 
				}
				this.passwordReady = true;
			}
		}
	}
</script>
<style scoped lang="less">
.login-register{
	width: 100%;
	height: 100%;
	background:url('../assets/background.png');
	background-size: 100% 100%;
	overflow: hidden;
	position: relative;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to{
  opacity: 0
}
.msg-tips{
	position: absolute;
	top:150 / 100rem;
	left: 225 / 100rem;
	width: 300 / 100rem;
	height: 48 / 100rem;
	background-color: rgba(255,255,255,0.9);
	border-radius: 24 / 100rem;
	font-size: 24 / 100rem;
	text-align: center;
	line-height: 48 / 100rem;
	color: #999;
}
.title{
	color: #fff;
	font-size: 60/100rem;
	text-align: center;
	margin-top: 365/100rem;
}
.log-reg-input{
	width: 504/100rem;
	margin: 0 auto;
	margin-top: 96/100rem;
}
.tabs{
	display: flex;
}
.tabs span{
	flex:1;
	color: #ccc;
	font-size: 36/100rem;
	text-align: center;
	border-bottom: 1px solid #322d47;
	padding-bottom: 37/100rem;
}
.tabs .line-show{
	border-bottom: 2px solid #bf70e8;
}
.input-box{
	margin-top: 73/100rem;
	
}
.input-box p{
	width: 100%;
	padding-bottom: 19/100rem;
	border-bottom: 1px solid #fff;
}
.input-box p input{
	background-color: transparent;
	border: none;
	outline: none;
	color: #999;
	height: 24/100rem;
	font-size: 24/100rem;
	// margin-bottom: 24/100rem;
}
.input-box .user img{
	width: 33/100rem;
	height: 39/100rem;
	margin-left: 26/100rem;
	margin-right: 20/100rem;
	vertical-align: middle;
}
.input-box .passwd{
	margin-top: 43/100rem;
}
.input-box .passwd img{
	width: 33/100rem;
	height: 40/100rem;
	margin-left: 26/100rem;
	margin-right: 20/100rem;
}
.loginto-btn{
	display: block;
	width: 486/100rem;
	height: 80/100rem;
	margin: 0 auto;
	margin-top: 60/100rem;
}
.loginto-btn img{
	width: 100%;
	height: 100%;
}
.register-btn{
	display: block;
	width: 486/100rem;
	height: 80/100rem;
	margin: 0 auto;
	margin-top: 60/100rem;
}
.register-btn img{
	width: 100%;
	height: 100%;
}
.feng-line{
	text-align: center;
	margin-top: 96.5/100rem;
}
.feng-line span img{
	width: 120/100rem;
	height: 18/100rem;
}
.feng-line .word{
	color: #ccc;
	font-size: 18/100rem;
	margin:0 30/100rem;
}
.other-login{
	width: 400/100rem;
	margin: 0 auto;
	margin-top: 78/100rem;
}
.other-login span{
	margin: 0;
}
.other-login .qq img{
	width: 54/100rem;
	height: 54/100rem;
}
.other-login .weixin{
	margin: 0 105/100rem;
}
.other-login .weixin img{
	width: 59/100rem;
	height: 48/100rem;
}
.other-login .weibo img{
	width: 58/100rem;
	height: 47/100rem;
}
</style>